<template>
	<view class="content">
		<image :src="logo" mode="aspectFill" class="logo" v-if="!logoSrcs.length"></image>
		<view class="imgs" v-else>
			<image v-for="(logoSrc,i) in logoSrcs" :key="i"  :src="logoSrc" mode="aspectFit"></image>
		</view>
		<view class="zcells">
			<view class="zcell" @click="inter(1)">
				<view class="label">
					<text class="iconfont icon-ym-jiance"></text>
					活体检测
				</view>
				<view class="key">
					<text class="iconfont icon-xiangyou"></text>
				</view>
			</view>
			<view class="zcell" @click="inter(2)">
				<view class="label">
					<text class="iconfont icon-ym-caiji"></text>
					人脸图像采集
				</view>
				<view class="key">
					<text class="iconfont icon-xiangyou"></text>
				</view>
			</view>
		</view>
		<view class="zcells">
			<view class="zcell">
				<view class="label">
					<text class="iconfont icon-ym-jingyin"></text>
					默认静音(仅Android有效)
				</view>
				<view class="key">
					<switch :checked="!isSound" @change="(e)=>{isSound=!e.target.value}" />
				</view>
			</view>
			<view class="zcell">
				<view class="label">
					<text class="iconfont icon-ym-lianbuquyu"></text>
					bestImage0默认截取脸部区域
				</view>
				<view class="key">
					<switch :checked="AutoClip" @change="(e)=>{AutoClip=e.target.value}" />
				</view>
			</view>
			<view class="zcell">
				<view class="label">
					<text class="iconfont icon-ym-shexiangtou"></text>
					后置摄像头
				</view>
				<view class="key">
					<switch :checked="backCamera" @change="(e)=>{backCamera=e.target.value}" />
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true">
			<view class="msg" v-html="msg">
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				msg: '',
				logo:'/static/logo.png',
				logoSrcs: [],
				isSound: true,
				AutoClip: true,
				backCamera: false
			}
		},
		onLoad() {
			/* 动态修改标题 */
			let title = uni.getStorageSync("title");
			uni.setNavigationBarTitle({
				title:title.F_FullName
			});
		},
		methods: {
			inter(index) {
				const _self = this;
				const PPFace = uni.requireNativePlugin('PP-BaiduFace');
				let config = {
					licenseName: 'idl-license',
					licenseSuffix: 'face-android',
					licenseId: 'yinmai-jnpf-2057-face-android',
					liveActionArray: ["Eye", "HeadLeft", "HeadLeftOrRight"],
					bgColor: "#56445D",
					textColor: "#C5E99B",
					isSound: _self.isSound, //默认是否开启语音提示（仅Android有效）默认值：false
					AutoClip: _self.AutoClip, //自动裁剪用户脸部区域 默认：false
					isBackCamera: _self.backCamera //启用后置摄像头
				}

				if (plus.os.name == 'iOS') {
					config.licenseSuffix = 'face-ios';
					config.licenseId = 'yinmai-jnpf-2057-face-ios';
				}

				if (inx == 1) {
					PPFace.faceliveness(config, result => {
						_self.msg = new Date().getHours() + ':' + new Date().getMinutes() + '  ' + JSON.stringify(result) + '<br/>' +
							_self.msg;
						if (result.FaceStatusEnum == '"OK"') {
							_self.saveImgs(result.base64ImageMap);
						}
					});

				} else if (inx == 2) {
					PPFace.recycler(config, result => {
						_self.msg = new Date().getHours() + ':' + new Date().getMinutes() + '  ' + JSON.stringify(result) + '<br/>' +
							_self.msg;
						if (result.FaceStatusEnum == '"OK"') {
							_self.saveImgs(result.base64ImageMap);
						}
					});
				}

			},
			saveImgs(imgsobj) {
				let _self = this;
				_self.logoSrcs = [];
				for (let key in imgsobj) {
					var base64data = imgsobj[key];
					_self.bitmapsave(base64data);
				}
			},
			bitmapsave(basedata) {
				let _self = this;
				var bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(basedata, function(e) {
					bitmap.save('_doc/_tmp/head' + new Date().getTime() + '.png', {}, function(e) {
						_self.logoSrcs.push(e.target);
					});
				}, function() {
					// console.log('加载Base64图片数据失败：' + JSON.stringify(e));
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}

	.content {
		text-align: center;
		height: 400upx;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 50upx;
		margin-bottom: 30upx
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}

	.msg {
		text-align: left;
		padding: 40rpx;
		font-size: 25rpx;
		color: #F0AD4E;
	}

	.zcells {
		margin-bottom: 20upx;
		padding: 0 20upx;
		background-color: #fff;
		
		.zcell {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 120upx;
			border-bottom:1upx solid #e5e5e5;
			font-size: 28upx;
			color: #252B3A;
			&:last-child{
				border-bottom:none;
			}
			.label{
				line-height: 80upx;
				.iconfont{
					width: 80upx;
					height: 80upx;
					background: #3383ff;
					line-height: 80upx;
					border-radius: 50%;
					display: inline-block;
					margin-right: 40upx;
					color: #fff;
					font-size: 34upx;
				}
			}
			.key{
				.icon-xiangyou{
					font-size: 28upx;
					color: #C4C4C4;
				}
				switch {
				  transform: scale(0.8);
				}
			}
		}
	}
	.imgs{
		margin-top: 50upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20upx;
		margin-bottom: 30upx;
		image{
			width: 150upx;
			height: 150upx;
			
		}
	}
</style>
